<script setup>
import { ref } from 'vue'
import useStore from './store' //store组织的其他模块 => ./store
import { storeToRefs } from 'pinia' // 防止丢失响应式 => pinia

const { todos } = useStore() //store组织的其他模块 => ./store
const {
  list,
  isCheckAll,
  leftCount,
  isShowFooter,
  isShowClear,
  filters,
  active,
  renderList,
} = storeToRefs(todos) //渲染数据 => pinia

const {
  changeDone,
  deleteItem,
  addItem,
  changeAllDone,
  clearComplted,
  changeActive,
} = todos //拿到状态的action方法

console.log(isCheckAll.value) //ref:false

const name = ref('') //添加操作,收集数据
const handlAdd = () => {
  //把数据加工成对象
  const o = {
    id: Date.now(),
    name: name.value,
    done: false,
  }
  addItem(o)
  name.value = ''
}

//订阅todos模块数据的变化,一旦有变化就会触发回调
todos.$subscribe(() => {
  //存到本地序列号一下
  localStorage.setItem('todos', JSON.stringify(todos.list))
  localStorage.setItem('active', todos.active)
})

console.log(todos)
</script>
<template>
  <section class="todoapp">
    <header class="header">
      <h1>todos</h1>
      <!-- 双向绑定,收集数据完毕 -->
      <input
        class="new-todo"
        placeholder="What needs to be done?"
        autofocus
        v-model="name"
        @keyup.enter="handlAdd"
      />
    </header>

    <section class="main">
      <!-- isCheckAll和全选按钮的checked属性进行绑定 -->
      <!-- 绑定onChange事件,调用 changeAllDone action,把当前全选状态取反的结果传递过去应用于每一个单选 -->
      <input
        id="toggle-all"
        class="toggle-all"
        type="checkbox"
        :checked="isCheckAll"
        @change="changeAllDone(!isCheckAll)"
      />
      <label for="toggle-all">Mark all as complete</label>
      <ul class="todo-list">
        <!-- 循环数据 -->
        <li
          :class="{ completed: item.done }"
          v-for="item in renderList"
          :key="item.id"
        >
          <!-- !不要忘记把原来的list换成renderList -->
          <div class="view">
            <!-- <input class="toggle" type="checkbox" v-model="item.done" /> -->
            <input
              class="toggle"
              type="checkbox"
              :checked="item.done"
              @change="changeDone(item.id)"
            />
            <label>{{ item.name }}</label>
            <button class="destroy" @click="deleteItem(item.id)"></button>
          </div>
          <input class="edit" value="Create a TodoMVC template" />
        </li>

        <!-- <li>
          <div class="view">
            <input class="toggle" type="checkbox" />
            <label>Buy a unicorn</label>
            <button class="destroy"></button>
          </div>
          <input class="edit" value="Rule the web" />
        </li> -->
      </ul>
    </section>

    <!-- 要不要显示底部功能 -->
    <footer class="footer" v-if="isShowFooter">
      <!-- 剩余数量 -->
      <span class="todo-count"
        ><strong>{{ leftCount }}</strong> item left</span
      >
      <ul class="filters">
        <!-- 循环,点击修改active的值 -->
        <li v-for="item in filters" :key="item" @click="changeActive(item)">
          <!-- 等于active就是高亮 -->
          <a :class="{ selected: item === active }" href="#/">{{ item }}</a>
        </li>
        <!-- <li>
          <a href="#/active">Active</a>
        </li>
        <li>
          <a href="#/completed">Completed</a>
        </li> -->
      </ul>
      <!-- 是否显示清除按钮 -->
      <button class="clear-completed" v-if="isShowClear" @click="clearComplted">
        Clear completed
      </button>
    </footer>
  </section>
</template>
